<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
    	body,html{
				background:white;
    	}
    	.headerBox{
    		width:100%;
    		height:7rem;
    		border-top:1px solid white;
    		border-bottom:1px dashed #8e8e8e;
    		padding-bottom:0.4rem;
    	}
    	.header{
    		height: 100%;
    		display:flex;
			display:-webkit-flex;
			flex-direction: column;
			-webkit-justify-content: center;
    		justify-content: center;
    	}
    	.introduction{
    		height: 100%;
    		display:flex;
			display:-webkit-flex;
			flex-direction: column;
			-webkit-justify-content: center;
    		justify-content: center;
    	}
    	.infoBox{
    		height:6rem;
    		width:97%;
    		display:flex;
			display:-webkit-flex;
			flex-direction: column;
			-webkit-justify-content: center;
    		justify-content: center;
    	}
    	.pictureBox{
    		width:88%;
    		margin: 0 auto;
    		border-radius: 5px;
    		overflow:hidden;
    	}
    	.pictureBox img{
    		width:100%;
    		height:100%;
    		display:block;
    	}
    	.title{
    		width:100%;
    		height:2.3rem;
    		line-height: 2.3rem;
    		color:#515151;
    		font-weight:bold;
    		font-size:6vw;
    	}
    	.otherMsg{
    		width:100%;
    		height:3.6rem;
    		color:#8e8e8e;
    	}
    	.otherMsg div{
    		width:100%;
    		height:50%;
    		line-height: 1.8rem;
    	}
    	.my-list{
          width: 100%;
          height: 6rem;
          background: white;
          border-bottom:1px dashed #8e8e8e;
          /*margin-top: 0.4rem;*/
      }
      .product-image,.product-msg{
          height: 100%;
          display:flex;
    			display:-webkit-flex;
    			flex-direction: column;
    			-webkit-justify-content: center;
      		justify-content: center;
      }
      .img-box{
          width: 92%;
          height:5rem;
          margin: 0 auto;
          overflow: hidden;
      }
      .img-box img{
          width: 100%;
          height: 100%;
          display: block;
      }
      .msg-box{
          width: 100%;
          height:5rem;
      }
      .titleAname{
          width: 100%;
          height: 2rem;
          padding-right: 0.5rem;
          font-size: 4vw;
          line-height: 1rem
      }
      .price{
          width: 100%;
          height: 1.5rem;
          padding-right: 0.5rem;
          color: #ff4800;
          font-weight: bold;
          line-height: 1.5rem;
      }
      .version{
          width: 100%;
          height: 1.5rem;
          text-align: right;
          color: gray;
          padding-right: 0.5rem;
          line-height: 1.5rem
      }
    </style>
</head>
<body>
	<div class="headerBox aui-row">
		<div class="aui-col-xs-4 header">
			<div class="pictureBox">
				<img src="" id="shopHeader"/>
			</div>
		</div>
		<div class="aui-col-xs-8 introduction" >
			<div class="infoBox">
				<div class="title"></div>
				<div class="otherMsg">
					<div>
						<span class="aui-pull-left" id="onsaleNum">在售商品数：</span>
						<span class="aui-pull-right"></span>
					</div>
					<div>
						<span class="aui-pull-left" id="level">商家等级：</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="proList">
		<!--<div class="my-list aui-row" >
	        <div class="aui-col-xs-5 product-image">
	            <div class="img-box">
	                <img src="../image/box.png">
	            </div>
	        </div>
	        <div class="aui-col-xs-7 product-msg">
	            <div class="msg-box">
	                <div class="titleAname aui-ellipsis-2">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
	                <div class="price">&yen;450</div>
	                <div class="version">安卓版</div>
	            </div>
	        </div>
	    </div>-->
	    <div class="aui-hide" id="noData" style="text-align: center">
    	<img src="../image/nodata.jpg"/>
    	<span>该商家暂无商品信息~~</span>
    </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript">
	$api.css($api.dom('.pictureBox'),'height:'+$api.offset($api.dom('.pictureBox')).w+'px');
	var shopId;
	apiready = function(){
		shopId = api.pageParam.data.id;
		getpageData('NO','NO');
	};
	function getpageData(loading,isdown){
		var data = {};
		data['values'] = {};
		data['values']['shopId'] = shopId;
		requestData('Shop/getShopMsg',data,loading,'NO',isdown,_callbackData);
	}
	function _callbackData(ret){
		if(ret.status == 200){
			$api.text($api.dom('.title'),ret.shopInfo.shop_name);
			$api.append($api.byId('level'), ret.shopInfo.level);
			$api.append($api.byId('onsaleNum'), ret.shopInfo.onsaleNum);
			$api.attr($api.byId('shopHeader'), 'src', pictureUrl+ret.shopInfo.shop_logo);
			if(ret.proList.length>0){
				$api.addCls($api.byId('noData'), 'aui-hide');
				var html = '';
				for(var i=0;i<ret.proList.length;i++){
					var images = ret.proList[i].goods_img;
	  				html+='<div class="my-list aui-row" onclick="goToProductDetail('+ret.proList[i].id+')">';
	  				html+='<div class="aui-col-xs-5 product-image">';
	  				html+='<div class="img-box">';
	  				html+='<img src="'+pictureUrl+images.split(',')[0]+'">';
	  				html+='</div>';
	  				html+='</div>';
	  				html+='<div class="aui-col-xs-7 product-msg">';
	  				html+='<div class="msg-box">';
	  				html+='<div class="titleAname aui-ellipsis-2">'+ret.proList[i].game_name+'【'+ret.proList[i].server+'】'+ret.proList[i].goods_word+'</div>';
	  				html+='<div class="price">&yen;'+ret.proList[i].goods_price+'</div>';
	  				html+='<div class="version">'+ret.proList[i].platform+'</div>';
	  				html+='</div>';
	  				html+='</div>';
	  				html+='</div>';
				}
				$api.html($api.byId('proList'), html);
			}else{
				$api.removeCls($api.byId('noData'), 'aui-hide');
			}
		}
	}
	function goToProductDetail(id){
		api.sendEvent({
		    name: 'rebackToDetail',
		    extra: {
		        key: id,
		    }
		});

		api.openWin({
				name: 'ProductDetailPage',
				url: './win.html',
				pageParam: {
						page:'ProductDetailPage',
						title: '商品详情',
				  data:{
				  	id:id,
				  },
				  bounces:false
						}
		});
	}
</script>
</html>
